<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>js修改keyframe</title>
        <style>
            .box-200-300{
                height: 200px;
                width: 200px;
                background-color: red;
                -webkit-animation: run 2s ease;
                -o-animation: run 2s ease;
                animation: run 2s ease;
            }
        </style>
    </head>
    <body>
        <h1>JavaScript怎么修改@keyframes</h1>
        <p><a href="https://segmentfault.com/q/1010000002561714/a-1020000002562040">来源</a></p>
        <div class="box-200-300"></div>
        <script>
            var dynamicValue = "33.3";
            var  rule= "@-webkit-keyframes run{0% {transform:translateX(0%);-webkit-transform:translateX(0%);}\n"+
                  "100%{transform:translateX("+ dynamicValue + "%);-webkit-transform:translateX("+ dynamicValue +"%);}}";

            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = '';
            document.getElementsByTagName('head')[0].appendChild(style);
            var stylesheet = document.styleSheets[document.styleSheets.length-1];

            try {
                stylesheet.insertRule( rule , this.stylesheet.rules.length);
                // addCSSRule(stylesheet, "header", rule);
            } catch (e) {
                consolle.log('error',e);
            };
            function addCSSRule(sheet, selector, rules, index) {
                if("insertRule" in sheet) {
                    sheet.insertRule(selector + "{" + rules + "}", index);
                }
                else if("addRule" in sheet) {
                    sheet.addRule(selector, rules, index);
                }
            }
             
            // 使用方式
            // addCSSRule(document.styleSheets[0], "header", "float: left");

        </script>
    </body>
</html>